<template>
  <el-checkbox-group v-model="checkedValues" @change="handleChange">
    <el-checkbox
      v-for="item in options"
      :key="item.value"
      :value="item.value"
      >{{ item.label }}</el-checkbox
    >
  </el-checkbox-group>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'

// 定义组件的props
const props = defineProps({
  // 传入的选项列表，每个选项包含label和value
  options: {
    type: Array,
    default: () => []
  },
  // 初始选中的值
  modelValue: {
    type: Array,
    default: () => []
  }
})
const getList = () => {
  console.log(props.modelValue, props.options)
}

// 定义组件的事件
const emits = defineEmits(['update:modelValue', 'change'])

// 使用ref来存储当前选中的值
const checkedValues = ref(
  props.modelValue === null ? [] : [...props.modelValue]
)

// 监听选中值的变化
const handleChange = (values) => {
  // 更新选中的值
  checkedValues.value = values
  // 触发update:modelValue事件，用于双向绑定
  emits('update:modelValue', values)
  // 触发change事件
  emits('change', values)
}
getList()
</script>
